<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>



    <div id="root">

        <input type="text" placeholder="Enter" v-model="ipt">
        <ul>
              @after-appear=""
            <li v-for="(item,index) in lists" :key="index">
                {{item.name}}--{{item.age}}
            </li>
        </ul>
        <!--点击更新-->
        <button @click="undataZ">点击更新</button>

    </div>

    <script>
        //用计算属性实现
        const vm = new Vue({
            el: "#root ",
            data: {
                ipt: " ",
                lists: [{
                    id: "01 ",
                    name: "马冬梅 ",
                    age: '18'
                }, {
                    id: "02 ",
                    name: "周冬雨 ",
                    age: '80'
                }, {
                    id: "03 ",
                    name: "周杰伦 ",
                    age: '25'
                }],

            },
            methods: {

                undataZ() {
                    // this.lists[0].name = "邓紫棋 "
                    // this.lists[0].age = "40"
                    //修改数组中的某项数据，需要使用数组的方法，获取索引直接修改的话，数据在保存在vm._data上时不能提供set get 方法，所以页面不能响应式，页面不能修改
                    // this.lists[0] = {
                    //     name: "马 ",
                    //     age: '18'

                    // }

                    //所以需要使用数据的方法修改
                    this.lists.splice(0, 1, {
                        id: '001',
                        name: '邓周梅',
                        age: "20"
                    })

                }

            },
        })
    </script>
    <style>

    </style>
</body>

</html>